import React, { Component } from 'react'
import { Form, Button, Table, Row, Col, Popconfirm, Icon, Modal, Input, Switch, Checkbox } from 'antd';
import * as fetch from '../../utils/http'


class DeviceSignal extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isShared: true,
            notUpdate: true,
            visibleSignalModal: false,
            signalList: [],
            modalTitle: '新建设备信号',
            currentSignal: this.resetCurrentSignal()
        }
        this.getAllSignal()
    }

    resetCurrentSignal() {
        return {
            aisleNo: '',
            createTime: '',
            cupboardNo: '',
            frameNo: '',
            id: '',
            isShared: false,
            signName: '',
            signNo: '',
            slotNo: '',
            unit: null
        }
    }


    getAllSignal() {
        fetch.get('DeviceItemProperty/GetDeviceItemPropertys').then(res => {
            this.setState({
                signalList: res.data || []
            })
        })
    }

    onDelSignal = (item) => {
        const { id } = item
        fetch.post('DeviceItemProperty/Delete', { id }).then(res => {
            this.getAllSignal()
        })
    }

    onEditSignal = (item) => {
        const currentSignal = Object.assign({}, item)
        console.log(currentSignal)
        this.setState({
            currentSignal
        }, () => {
            this.setState({
                visibleSignalModal: true
            })
            console.log(this.state.currentSignal)
        })
    }

    openSignalModal() {
        this.setState({
            visibleSignalModal: true,
            currentSignal: this.resetCurrentSignal()
        })
    }

    onSaveSignal = () => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                const params = Object.assign(values)
                let url = values.id ? 'DeviceItemProperty/Edit' : 'DeviceItemProperty/Add'
                fetch.post(url, params).then(res => {
                    if (res.isSuccess) {
                        this.getAllSignal()
                        this.props.form.resetFields();
                        this.setState({
                            visibleSignalModal: false,
                        }, () => {
                            console.log(this.state.currentSignal)
                        })
                    }
                })
            }
        })
    }

    cancelModal = () => {
        this.setState({
            visibleSignalModal: false,
            currentSignal: this.resetCurrentSignal()
        })
    }

    changeSwitch = (e, item) => {
        const currentSignal = Object.assign({}, item)
        currentSignal.isShared = e
        this.setState({
            currentSignal
        })
    }

    render() {
        const { visibleSignalModal } = this.state
        const { getFieldDecorator } = this.props.form;
        const columns = [
            {
                title: '信号名称',
                dataIndex: 'signName',
                key: 'signName'
            },
            {
                title: '信号意义',
                dataIndex: 'signNo',
                key: 'signNo'
            },
            {
                title: '信号类别',
                dataIndex: 'unit',
                key: 'unit'
            },
            {
                title: '柜号',
                dataIndex: 'cupboardNo',
                key: 'cupboardNo'
            },
            {
                title: '机架号',
                dataIndex: 'frameNo',
                key: 'frameNo'
            },
            {
                title: '槽号',
                dataIndex: 'slotNo',
                key: 'slotNo'
            },
            {
                title: '通信号',
                dataIndex: 'aisleNo',
                key: 'aisleNo'
            },
            {
                title: '是否共用',
                render: item => (
                    <div>
                        {
                            item.isShared ? <span>是</span> : <span>否</span>
                        }
                    </div>
                )
            }, {
                title: '操作',
                width: 100,
                render: item => (
                    <Row type="flex" justify="space-between" >
                        <Col>
                            <Button type="primary" size="small" onClick={this.onEditSignal.bind(this, item)} icon="form"></Button>
                        </Col>
                        <Col>
                            <Popconfirm
                                onConfirm={this.onDelSignal.bind(this, item)}
                                title="确定删除吗？"
                                okText="删除"
                                cancelText="取消"
                                icon={<Icon type="question-circle-o" style={{ color: 'red' }} />}
                            >
                                <Button type="danger" size="small" icon="delete"></Button>
                            </Popconfirm>
                        </Col>
                    </Row >
                )
            }]

        const CheckBoxItem = (item, field) => {
            return (
                <Checkbox checked={item[field]} onChange={this.onAuthorityChange.bind(this, item, field)} ></Checkbox>
            )
        }

        const { signalList } = this.state
        return (
            <div>
                <h3>设备管理 - 设备信号</h3>
                <Button type="primary" onClick={this.openSignalModal.bind(this)}>新增子项信号</Button>
                <div style={{ padding: '10px 0px' }}>
                    <Table dataSource={signalList} bordered columns={columns} rowKey="id" pagination={false}></Table>
                </div>
                < Modal title={this.state.modalTitle}
                    cancelText='取消'
                    onCancel={this.cancelModal.bind(this)}
                    onOk={this.onSaveSignal.bind(this)}
                    okText='确定'
                    visible={visibleSignalModal}
                >
                    <Form className="login-form">
                        <Form.Item label="id" className="hidden-input">
                            {getFieldDecorator('id', {
                                initialValue: this.state.currentSignal.id
                            })(
                                <Input
                                    className="h-40"
                                    type="text"
                                    placeholder="信号名称"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item label="信号名称" >
                            {getFieldDecorator('signName', {
                                initialValue: this.state.currentSignal.signName,
                                rules: [{ required: true, message: '信号名称必须输入' }]
                            })(
                                <Input
                                    className="h-40"
                                    type="text"
                                    placeholder="信号名称"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item label="信号意义" >
                            {getFieldDecorator('signNo', {
                                initialValue: this.state.currentSignal.signNo,
                                rules: [{ required: true, message: '信号意义必须输入' }]
                            })(
                                <Input
                                    className="h-40"
                                    type="text"
                                    placeholder="信号意义"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item label="信号类别" >
                            {getFieldDecorator('unit', {
                                initialValue: this.state.currentSignal.unit
                            })(
                                <Input
                                    className="h-40"
                                    type="text"
                                    placeholder="信号类别"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item label="柜号" >
                            {getFieldDecorator('cupboardNo', {
                                initialValue: this.state.currentSignal.cupboardNo,
                                rules: [{ required: true, message: '柜号必须输入' }]
                            })(
                                <Input
                                    className="h-40"
                                    type="text"
                                    placeholder="柜号"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item label="机架号" >
                            {getFieldDecorator('frameNo', {
                                initialValue: this.state.currentSignal.frameNo,
                                rules: [{ required: true, message: '机架号必须输入' }]
                            })(
                                <Input
                                    className="h-40"
                                    type="text"
                                    placeholder="机架号"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item label="槽号" >
                            {getFieldDecorator('slotNo', {
                                initialValue: this.state.currentSignal.slotNo,
                                rules: [{ required: true, message: '槽号必须输入' }]
                            })(
                                <Input
                                    className="h-40"
                                    type="text"
                                    placeholder="槽号"
                                />
                            )}
                        </Form.Item>
                        <Form.Item label="通信号" >
                            {getFieldDecorator('aisleNo', {
                                initialValue: this.state.currentSignal.aisleNo,
                                rules: [{ required: true, message: '通信号必须输入' }]
                            })(
                                <Input
                                    className="h-40"
                                    type="text"
                                    placeholder="通信号"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item label="是否共用" >
                            {getFieldDecorator('isShared', {
                                initialValue: this.state.currentSignal.isShared,
                            })(
                                <Switch onChange={(e) => {
                                    this.changeSwitch(e, this.state.currentSignal)
                                }} checked={this.state.currentSignal.isShared} />
                            )}
                        </Form.Item>
                    </Form>
                </Modal >
            </div>
        );
    }
}

export default Form.create()(DeviceSignal);